<template>
	<div class="goods-list">
		<h2 class="m-t-20 m-b-12">{{catName}}</h2>
		<div class="f-row-between">
			<div v-if="goodsList.length == 0">店家正在路上...</div>
			<div class="goods-item" v-for="item in goodsList" :key="item.goods_id">
				<div  :style="{height :imgHeight + 'px'}">
					<van-image @load="Isload = false" lazy-load :src="item.goods_thumb">
							<van-loading v-if="Isload" type="spinner" color="#07c160" />
					</van-image>
				</div>
				<p v-cloak>{{item.goods_name}}</p>
				<p v-cloak>{{item.goods_desc}}</p>
				<p v-cloak>￥{{item.price}}</p>
			</div>	
		</div>
		
		<van-divider @click="getMore"  v-if="goodsList.length != 0" :style="{ color: '#1989fa', borderColor: '#999', padding: '0 16px' }">查看更多</van-divider>
		
	</div>
</template>

<script>
	export default{
		props:['catId', 'catName'],
		data(){
			return {
				Isload : true,
				goodsList : [	],
				page : 1,
			}
		},
		computed:{
			imgHeight(){
				let windowW = document.documentElement.clientWidth - 24;
				return windowW * 0.49;
			},
		},
		
		methods : {
			//请求分类数据
			async getCatGoods(){
				this.$toast.loading({
					loadingType : 'spinner',
					message : '拼命加载中...',
					duration : 0,
					forbidClick : true
				})
				//调用此函数，得到一个数据结果
				try{
					let result = await this.axios.get('/api_goods', {
						params : {
							catId : this.catId,
							page : this.page,
							pagesize : 4,
						}
					});
					
					//数据请求成功，关闭提示 
					this.$toast.clear();
					//调用方法得到结果
					return result;
				}catch(err){
					console.log(err);
					return '后台错误';
				};			
			},
			//加载更多
			getMore(){
				this.page++;
				this.getCatGoods().then((res) => {
					let {data} = res;
					if(data.code != 0){
						console.log(data);
						return;
					};
					this.goodsList.push(...data.data);
				});
			},
		},
		
		created() {
			this.getCatGoods().then((res) => {
				let {data} = res;
				if(data.code != 0){
					console.log(data);
					return;
				};
				//赋值
				this.goodsList = data.data;
			});
		}
}
</script>

<style scoped lang="less">
	.goods-list{
		.f-row-between{
			flex-wrap: wrap;
			
			.goods-item{
				background-color: #fff;
				margin-bottom: 12px;
				width:49%;
				height: 300px;
				font-size: 13px;
				
				p{
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
					margin: 10px 0;
				}
				p:nth-child(4){
					font-size: 16px;
					font-weight: bold;
					color : #07c160;
					margin-top: 20px;
				}
			}
		}
	
		.more{
			text-align: center;
			line-height: 40px;
			color:#666;
			font-size: 14px;
		}
	}
</style>
